사이트 내 전체검색
객체에 공통적으로 적용될 이벤트 한번에 적용하기UI 관련
로빈아빠
https://cmd.kr/javascript/770 URL이 복사되었습니다.

본문

제목 쓰기가 어렵다.. ㅡㅡ;

셀렉트박스 마우스 휠 적용 안되도록... 에서 고민하던 부분이 해결 되었다.

셀렉트박스 전체에 대해서.. onchange 이벤트 발생시 포커스를 셀렉트박스 외부로 옮기는 것이었다.

매번 셀렉트박스 코딩마다 넣어주기는 힘들 것 같아서.. 다른 방법을 고민하고 있었는데..

오늘 해결이 되었다.

function SelectOnChange() {
  if (document.readyState == "complete") {
    var selBoxs = document.getElementsByTagName("SELECT");
    for(i=0; i<selBoxs.length; i++) {
      if (!selBoxs[i].onchange) {
        selBoxs[i].onchange=function(){window.focus();};
      }
    } 
  } else {
    setTimeout('SelectOnChange()',1000);
  }
}
document.onload = SelectOnChange();

위 소스를 공통으로 사용되는 .js 파일내에 추가하면 되겠다.

보통 window.onload 를 자주 사용하기 때문에.. window.onload 를 피해 document.onload 에 함수를 실행하도록 했다.

테스트 결과 document.onload 이후에 window.onload 가 실행되기 때문에, 도큐먼트가 로딩되었어도 셀렉트박스를 찾을 수 없었다.

그래서, document.onload 시에.. document.readyState 상태를 확인하고.. 1초마다 재귀호출을 하도록 하였다.

document.readyState 가 complete 이면 window.onload 가 된 상태이다.

window.onload 전에는 document.readyState 가 loading 으로 나왔다.

그리고, 기존 셀렉트박스에 onchange 이벤트에 함수가 있는 경우에는 제외를 했다.

함수를 추가로 적용시키는 방법이 있으면 좋을텐데.. 아직 찾지 못했다.



이와 유사한 형태로.. 특정한 객체에 공통적으로 적용되어야 할 사항이 있다면..

아주 유용하게 사용되지 않을까 싶다.
Posted by 따당

댓글목록

등록된 댓글이 없습니다.

831 (2/17P)

Search

Copyright © Cmd 명령어 3.144.249.247